<template>
    <div class="basic-wrapper">
        <div class="title">
            <span>基本信息</span>
            <el-icon color="#409eff" @click="edit" v-if="detailData && detailData.state == 'DISABLED'"
                ><Edit
            /></el-icon>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <el-descriptions v-if="detailData" :column="4" border>
                    <el-descriptions-item :span="3" label="产品名称">
                        {{ detailData.productName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="标识符">
                        {{ detailData.productNo }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="产品模型">
                        <span>{{ detailData.objectDisplayName }} / {{ detailData.objectName }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :span="1">
                        <template #label>
                            <div class="label">
                                <span> 节点类型 </span>
                                <el-tooltip>
                                    <template #content>
                                        <div style="max-width: 200px">
                                            1、直连设备：产品的协议类型可直接连接本平台，无需做协议转换，本平台支持直接连接MQTT和HTTPS协议。<br />
                                            2、网关设备：产品的协议类型不可以直接连接本平台，需通过网关做协议转换，转换为本平台支持的协议类型，本平台支持直接连接MQTT和HTTPS协议。<br />
                                            3、云网关设备：产品通过云网关上传数据，本平台需与云网关对接，获取数据。
                                        </div>
                                    </template>
                                    <el-icon size="14px"><InfoFilled /></el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                        <div class="img-item-value">
                            <el-tag
                                :type="
                                    detailData?.productType == 'DIRECT'
                                        ? 'success'
                                        : detailData?.productType == 'GATEWAY'
                                          ? 'primary'
                                          : 'warning'
                                "
                                >{{ ProductType[detailData?.productType] }}</el-tag
                            >
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="1">
                        <template #label>
                            <div class="label">
                                <span> 注册模式 </span>
                                <el-tooltip>
                                    <template #content>
                                        <div style="max-width: 300px">
                                            1、主动：设备主动向本平台发起连接<br />
                                            2、被动：设备等待本平台向它发起连接
                                        </div>
                                    </template>
                                    <el-icon size="14px"><InfoFilled /></el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                        <div class="img-item-value">
                            <el-tag>
                                {{ ConnectMode[detailData?.connectMode] }}
                            </el-tag>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="通讯协议">
                        {{ detailData?.protocolType }}-{{ detailData?.protocolName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="NB-Iot平台"> -- </el-descriptions-item>
                    <el-descriptions-item :span="1" label="超时离线"> {{ detailData.timeout }}秒 </el-descriptions-item>
                    <template v-if="detailData?.protocolType === 'mqtt'">
                        <el-descriptions-item :span="2" label="网络组件">
                            {{ detailData.networkComponentName }}</el-descriptions-item
                        >
                        <el-descriptions-item :span="2" label="服务地址">
                            {{ detailData.networkComponentIp }}:{{ detailData.networkComponentPort }}
                        </el-descriptions-item>
                    </template>
                    <el-descriptions-item :span="detailData?.protocolType === 'mqtt' ? 1 : 2" label="创建人">
                        {{ detailData?.creator }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="创建时间">
                        {{ detailData?.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="当前版本">
                        <div class="version-item-value">
                            <div>{{ detailData?.version }}</div>
                            <el-button type="primary" link disabled> 查看历史版本 </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="1" label="用户名密码" v-if="detailData?.protocolType === 'mqtt'">
                        {{ detailData?.username }}/{{ detailData?.password }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" label="描述">
                        <div class="value">{{ detailData?.productDesc }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { ProductType, ConnectMode } from '@/utils/constant';
import { InfoFilled, Edit } from '@element-plus/icons-vue';
import { showPopupBox } from '@great/utils';
import CreateEditModal from '../../../list/CreateEditModal.vue';

const props = defineProps<{
    detailData?: Record<string, any>;
}>();
const initDetail = inject('initDetail');
const loading = ref(true);

const edit = () => {
    showPopupBox(CreateEditModal, {
        row: props.detailData as any,
        callBack: initDetail as () => Promise<void>
    });
};

watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.basic-wrapper {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .el-descriptions {
        .label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .value {
            height: 64px;
        }
        .version-item-value {
            display: flex;
            justify-content: space-between;
        }
        .img-item-value {
            display: flex;
            align-items: center;
        }
    }
}
</style>
